<!-- [COMPONENT] : 银行选择下拉框
使用示例：
1） 下拉框
<select-project  v-model="xxxx"  placeholder="请选择xxx"/>
<select-project  v-model="xxxx"  placeholder="请选择xxx" label="xxxName"/>
2） 列数据
<select-project  isCol  :value="scope.row.xxxId"/>
<select-project  isCol  :value="scope.row.xxxId" label="xxxName"/>
-->
<template>
  <span v-if="isCol">
    <span  v-for="xx in getCol"  class="col" >
      {{xx[label]}}
    </span>
  </span>
  <span v-else>
      <string-multiple-select
        v-model="selectedValue"
        :placeholder="placeholder"
        :clearable="clearable"
        :disabled="disabled"
        :multiple="multiple"
        :filterable="filterable"
        :loading="loading"
        @change="handleChange"
        @focus="handleFocus"
      >
    <el-option
      v-for="obj in options"
      :key="obj.id"
      :label="obj[label]"
      :value="obj.id"
    />

    <!-- 加载状态或无数据提示 -->
    <template #empty>
      <div class="empty-text">
        {{ loading ? '加载中...' : '暂无数据' }}
      </div>
    </template>
      </string-multiple-select>
</span>

</template>


<script>
import {listProject} from "@/api/business/project";

import {initData, baseMethods} from "../base";

let baseData = initData("SelectProject", "项目", "id");
baseData.props = {
  ...baseData.props,
  label: {
    type: String,
    default: "name"
  },
}

export default {
  ...baseData,
  methods: {
    ...baseMethods(listProject),
  }
}

</script>

<style scoped>
.col {
  display: inline-block;
  margin-right: 10px;
  /*border-bottom: 1px dotted;*/
}

.empty-text {
  padding: 10px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>
